<template>
	<view class="goods-detail">
		<block v-if="goods!=''">
			<view class="content-box">
				<view class="box">
					<u-swiper class="u-swiper-box" style="width: 336rpx;" imgMode="heightFix" :list="goodsImgs"
						@change="e => current = e.current" :autoplay="false">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in goodsImgs" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
					<view class="goods-top">
						<view class="goods-name">{{goods.goods_name}}</view>
						<view class="middle">
							<view class="left">
								<text>¥</text>
								<text class="price">{{goods.goods_price}}</text>
							</view>
							<!-- #ifdef APP-PLUS -->
							<view class="share" @click="fenxiang">
								<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/wx-share.png"
									mode="widthFix"></image>
								<text>分享</text>
							</view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<button @click="onShare" class="share" open-type="share">
								<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/wx-share.png"
									mode="widthFix"></image>
								<text>分享</text>
							</button>
							<!-- #endif -->
						</view>
						<view class="price-box">
							<view class="chubeijin" v-if="given_cbj>0">购买赠送{{given_cbj}}储备金</view>
						</view>
					</view>
				</view>
				<view class="goods-shouyi">
					<view class="goods-shouyi-item">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/day-sy.png"
							mode="widthFix">
						</image>
						<view class="wrapper">
							<view class="tit">{{goods.day_sy}}两</view>
							<view class="last">日收益</view>
						</view>
					</view>
					<view class="goods-shouyi-item">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/day-cz.png"
							mode="widthFix">
						</image>
						<view class="wrapper">
							<view class="tit">{{goods.yield}}斤</view>
							<view class="last">产重</view>
						</view>
					</view>
					<view class="goods-shouyi-item">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/rili.png"
							mode="widthFix">
						</image>
						<view class="wrapper">
							<view class="tit">{{goods.sy_day}}天</view>
							<view class="last">周期</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-desc" v-if="goods.goods_remark!='' && goods.goods_remark!=null">
				<view class="tit">产品描述</view>
				<view class="desc">{{goods.goods_remark}}</view>
			</view>

			<view class="goods-xq">
				<view class="tit">详情说明</view>
				<view v-html="goods.goods_content" class="goods-content"></view>
			</view>
			<view class="goods-store" @click="toStoreDetail()">
				<image :src="goods.store_logo" mode="widthFix" class="store-img"></image>
				<view class="right">
					<view class="right-left">
						<view class="store-name">{{goods.store_name}}</view>
						<view class="dizhi">地址：{{goods.store_address}}</view>
					</view>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/more-grey.png"
						mode="widthFix" class="more-img"></image>
				</view>
			</view>
			<view style="height: 120rpx;background: none;margin-top: 0;"></view>
			<view class="goods-bot">
				<view class="left">
					<view class="left-item" @click="goIndex">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-sy.png"
							mode="widthFix"></image>
						<view class="text">首页</view>
					</view>
					<view class="left-item">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-kf.png"
							mode="widthFix"></image>
						<view class="text">客服</view>
					</view>
					<view class="left-item" @click="call_phone(goods.store_contacts_mobile)">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-phone.png"
							mode="widthFix"></image>
						<view class="text">电话</view>
					</view>
				</view>
				<view class="right">
					<button size="mini" class="buy-now" @click="buyNow">立即认养</button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		isWeiXin
	} from '../../common/helper';
	var _this;
	export default {
		data() {
			return {
				goodsImgs: [],
				goods: '',
				current: 0,
				id: 0,
				given_cbj: 0,
			};
		},
		methods: {
			onShare() {
				// #ifdef H5
				if (isWeiXin()) {
					uni.showToast({
						title: "请点击右上角分享",
						icon: "none"
					})
				}
				// #endif
			},
			fenxiang() {
				uni.navigateTo({
					url: `/pages/goods/goods-share?id=${_this.id}&type=2`
				})
			},
			buyNow() {
				uni.navigateTo({
					url: `/pages/foster/foster-confirm-order?id=${_this.id}`
				})
			},
			//获取商品信息
			async get_goods_detail() {
				const params = {
					id: _this.id,
				}
				const data = await _this.$post('api/ry_goods_xq', params)
				if (data.code == 200) {
					_this.goodsImgs = data.data.goods_imgs
					_this.goods = data.data.goods
					_this.given_cbj = data.data.given_cbj
				} else {
					_this.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			toStoreDetail() {
				uni.navigateTo({
					url: `/pages/goods/store-detail?store_id=${this.goods.store_id}`
				})
			},
		},
		onLoad(e) {
			_this = this;
			if (e.id) {
				_this.id = e.id
			}
			_this.get_goods_detail()
			this.officialConfig()
		},
		onShow() {

		},
		onShareAppMessage() {
			return {
				title: goods.goods_name
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/goods.scss";

	.goods-bot {
		padding-bottom: 20rpx;
		height: auto !important;
	}

	.content-box {
		width: 95%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.box {
			display: flex;

			/* #ifdef MP-WEIXIN */
			/deep/ .u-swiper {
				width: 50%;
			}

			/* #endif */

			.goods-top {
				padding: 0 0 0 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 50%;

				.goods-name {
					margin-top: 0;
					font-weight: 600;
				}

				.middle {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 36rpx;
						color: red;
						font-weight: 600;
					}

				}

				.share {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.price-box {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						font-size: 36rpx;
						color: red;
						font-weight: 600;
					}

					.chubeijin {
						font-size: 20rpx;
						margin-top: 0;
						white-space: nowrap;
						max-width: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}

		}

		.goods-shouyi {
			padding: 40rpx 0 0;
			display: flex;
			justify-content: space-between;

			.goods-shouyi-item {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;

				.wrapper {
					margin-left: 20rpx;
					text-align: left;
				}
			}
		}
	}
</style>